<template>
  <div>
    <!-- 头部 -->
    <head-nev msg="黑马优购" :backState="true"></head-nev>
    <!-- 下拉刷新 -->
    <van-pull-refresh @refresh="onRefresh" id="list-content" v-model="isLoading">
      <van-list
        v-model="isUpLoading"
        :finished="upFinished"
        :immediate-check="false"
        :offset="10"
        finished-text="我是有底线的"
        @load="onLoadList"
      >
        <van-card
          v-for="item in goodsList"
          :key="item.cat_id"
          :num="item.goods_number"
          :desc="item.goods_name"
          :thumb="item.goods_small_logo"
          @click="jumpDetailPage(item.goods_id)"
          lazy-load
          class="cards"
        >
          <div slot="tags">
            <span class="slotPrice">￥{{item.goods_price}}</span>
          </div>
        </van-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>


<script>
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)

export default {
  data() {
    return {
      goodsList: [],
      queryInfo: {
        query: '',
        cid: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 0,
      // 下拉刷新
      isLoading: false, //是否处于下拉刷新状态
      // 上拉加载
      isUpLoading: false,
      upFinished: false,
      offset: 100
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    //  获得查询商品列表
    async getGoodsList() {
      // 接收搜索关键词参数
      this.queryInfo.query = this.$route.params.cateName
      // console.log(this.$route.params);
      //接收分类Id参数
      this.queryInfo.cid = this.$route.params.id
      // console.log(this.queryInfo.cid);

      // 渲染页面
      const { data: res } = await this.$http.get('/goods/search', {
        params: this.queryInfo
      })
      // console.log(res);
      if (res.meta.status !== 200) {
        this.$message.warning('获取失败')
      }
      const rows = res.message.goods
      // this.goodsList = res.message.goods
       this.total = res.message.total
      // console.log(this.goodsList);
      //空商品
      if (rows.length === 0) {
        Toast('此商品没有数据')
      }
       if ( rows == null || rows.length === 0) {
        // 加载结束
        this.upFinished = true
        return
      }
      if ( rows.length < this.queryInfo.pagesize) {
        // 最后一页不足10条的情况
        this.upFinished = true
      }
     
       this.goodsList = this.goodsList.concat(rows)
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    },
    //上拉加载
    onLoadList() {
      setTimeout(() => {
        this.getGoodsList()
        this.queryInfo.pagenum++
        this.isUpLoading = false
        if (this.goodsList.length >= this.total) {
          this.upFinished = true

        }
        this.upFinished = false
      }, 1000)
    },
    // 点击文字跳转详情页
    jumpDetailPage(id) {
      this.$router.push({ path: 'details', name: 'Details', params: { id } })
    }
  }
  // mounted() {
  //   let winHeight = document.documentElement.clientHeight //视口大小
  //   document.getElementById('list-content').style.height = winHeight - 46 + 'px' //调整上拉加载框高度
  // }
}
</script>

<style scoped>
.van-col img {
  width: 100%;
}
.goodsName {
  width: 100%;
  font-size: 14px;
}
.priceNumber {
  margin-top: 10px;
  font-size: 14px;
  color: red;
}
.slotPrice {
  position: absolute;
  top: 1.75rem;
  font-size: 0.42667rem;
  color: red;
}

#list-content {
  min-height: 550px;
}

.van-card {
  margin-left: 0rem;
  padding: 10.8372px 21.6748px !important;
}
.van-card__desc {
     overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;

}
</style>